<template>
  <!-- <transition name="fade"> -->
  <div
    class="pickerDialogContainer"
    :style="getPickerDialogContainerStyle"
    v-show="visible"
    @click="clickMask"
  >
    <!-- <transition name="toup"> -->
    <div
      class="pickerCard"
      :style="getPickerCardStyle"
      ref="picker"
      v-show="visible"
    >
      <Header :titlePro="this.showTitle"></Header>
      <div class="pickDivider"></div>
      <div class="content" :style="contentStyle">
        <div class="contentBg">
          <div class="topDividerLine"></div>
          <div class="bottomDividerLine"></div>
        </div>
        <div class="colums">
          <Picker
            :column="column1"
            :boxHeight="boxHeight"
            :itemHeight="itemHeight"
            :defaultIndex="dIndex1"
            :rowNumber="getRowNumber"
            :unitPro="unit"
            :selectItemHeight="selectItemHeight"
            :selectFontSize="selectFontSize"
            :itemFontSize1="itemFontSize1"
            :itemFontSize2="itemFontSize2"
            @change="change1"
          />
          <Picker
            v-if="column2.length > 0"
            :column="column2"
            :boxHeight="boxHeight"
            :itemHeight="itemHeight"
            :defaultIndex="dIndex2"
            :rowNumber="getRowNumber"
            :selectItemHeight="selectItemHeight"
            :selectFontSize="selectFontSize"
            :itemFontSize1="itemFontSize1"
            :itemFontSize2="itemFontSize2"
            @change="change2"
          />
          <Picker
            v-if="column3.length > 0"
            :column="column3"
            :boxHeight="boxHeight"
            :itemHeight="itemHeight"
            :defaultIndex="dIndex3"
            :rowNumber="getRowNumber"
            :selectItemHeight="selectItemHeight"
            :selectFontSize="selectFontSize"
            :itemFontSize1="itemFontSize1"
            :itemFontSize2="itemFontSize2"
            @change="change3"
          />
          <Picker
            v-if="column4.length > 0"
            :column="column4"
            :boxHeight="boxHeight"
            :itemHeight="itemHeight"
            :defaultIndex="dIndex4"
            :rowNumber="getRowNumber"
            :selectItemHeight="selectItemHeight"
            :selectFontSize="selectFontSize"
            :itemFontSize1="itemFontSize1"
            :itemFontSize2="itemFontSize2"
            @change="change4"
          />
        </div>
      </div>
      <div class="pickDivider"></div>
      <Footer @clickCancel="cancel" @clickConfirm="confirm" />
    </div>
    <!-- </transition> -->
  </div>
  <!-- </transition> -->
</template>
<script>
import { DEFTAULT_ITEM_HEIGHT } from "./utils.js";
import {
  WIDTH_STANDARD,
  WIDTH_PHONE,
  WIDTH_SPREADED,
  WIDTH_PAD_PORTRAIT,
  WIDTH_PAD_LANDSCAPE,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenType,
  screenSize,
} from "../../../assets/js/flexible.js";

import Header from "./Header.vue";
import Footer from "./Footer.vue";
import Picker from "./Picker.vue";

export default {
  name: "PickerDialog",
  components: {
    Header,
    Footer,
    Picker,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
    layer: {
      type: Number,
      default: 0,
    },
    itemHeight: {
      type: [Number, String],
      default: screenSize(36),
    },
    selectItemHeight: {
      type: Number,
      default: screenSize(56),
    },
    selectFontSize: {
      type: Number,
      default: screenSize(20),
    },
    itemFontSize1: {
      type: Number,
      default: screenSize(16),
    },
    itemFontSize2: {
      type: Number,
      default: screenSize(14),
    },
    defaultIndex: {
      type: [Number, Array],
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
    maskClick: {
      type: Boolean,
      default: false,
    },
    rowNumber: {
      type: Number,
      default: 5,
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
    getOS: {
      type: String,
      default: "Android",
    },
    showTitlePro: {
      type: String,
      default: "",
    },
    unitPro: {
      type: String,
      default: "",
    },
    deviceTypePro: {
      type: Number,
      default: 1,
    },
  },

  data() {
    return {
      column1: [],
      column2: [],
      column3: [],
      column4: [],
      dIndex1: 0,
      dIndex2: 0,
      dIndex3: 0,
      dIndex4: 0,

      deviceType: 1,
      darkMode: "light",
      showTitle: "", //对话框标题
      unit: "", //单位
    };
  },
  mounted() {
    this.deviceType = this.deviceTypePro;
    // console.log("HuaweiPicker", "offsetHeight = " + this.$refs.contentElement.offsetHeight);
  },
  created() {
    this.init();
  },
  mounted() {
    this.$refs.picker.addEventListener("click", this.stopPropagation);
    if (this.appendToBody) {
      document.body.appendChild(this.$el);
    }
    this.darkMode = this.darkModePro;
    this.showTitle = this.showTitlePro;
    this.unit = this.unitPro;
  },
  watch: {
    visible(v) {
      // if (v) {
      //   this.fixedBody()
      // }
    },
    defaultIndex() {
      this.init();
    },
    data() {
      this.init();
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
    showTitlePro(newVal) {
      this.showTitle = newVal;
    },
    unitPro(newVal) {
      this.unit = newVal;
    },
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
  },
  beforeDestroy() {
    this.$refs.picker.removeEventListener("click", this.stopPropagation);
  },
  computed: {
    getPickerDialogContainerStyle() {
      switch (this.deviceType) {
        case 1: //android 手机
          return { alignItems: "center", justifyContent: "flex-end" };
        case 2: //android Pad竖屏
          return { alignItems: "center", justifyContent: "center" };
        case 3: //android Pad横屏
          return { alignItems: "center", justifyContent: "flex-end" };
        case 4: //android 折叠屏
          return { alignItems: "center", justifyContent: "center" };
        case 101: //iPhone
          return { alignItems: "center", justifyContent: "flex-end" };
        case 102: //iPad
          return { alignItems: "center", justifyContent: "center" };
        default:
          return { alignItems: "center", justifyContent: "flex-end" };
      }
    },

    getPickerCardStyle() {
      var itemWidth;
      var pickerWidth;
      switch (this.deviceType) {
        case 1: //android 手机
          return {
            width: flexibleWidth - screenSize(12) * 2 + "px",
            marginBottom: screenSize(16) + "px",
          };
        case 2: //android Pad竖屏
          itemWidth = (flexibleWidth - screenSize(12) * 9) / 8.0;
          pickerWidth = itemWidth * 4 + screenSize(12) * 3;
          return { width: pickerWidth + "px", marginBottom: 0 + "px" };
        case 3: //android Pad横屏
          return {
            width: flexibleWidth - screenSize(12) * 2 + "px",
            marginBottom: screenSize(16) + "px",
          };
        case 4: //android 折叠屏
          itemWidth = (flexibleWidth - screenSize(12) * 9) / 8.0;
          pickerWidth = itemWidth * 4 + screenSize(12) * 3;
          return { width: pickerWidth + "px", marginBottom: 0 + "px" };
        case 101: //iPhone
          return {
            width: flexibleWidth - screenSize(12) * 2 + "px",
            marginBottom: screenSize(16) + "px",
          };
        case 102: //iPad
          itemWidth = (flexibleWidth - screenSize(12) * 9) / 8.0;
          pickerWidth = itemWidth * 4 + screenSize(12) * 3;
          return { width: pickerWidth + "px", marginBottom: 0 + "px" };
        default:
          return {
            width: flexibleWidth - screenSize(12) * 2 + "px",
            marginBottom: screenSize(16) + "px",
          };
      }
    },

    contentStyle() {
      return { height: this.boxHeight + "px" };
    },

    boxHeight() {
      return this.itemHeight * (this.getRowNumber - 1) + this.selectItemHeight;
    },
    getRowNumber() {
      if (this.rowNumber < 3) {
        return 3;
      }
      return this.rowNumber % 2 === 0 ? this.rowNumber + 1 : this.rowNumber;
    },
    maskStyle() {
      let style = { backgroundSize: "100% 44px" };
      if (this.getRowNumber === 3) {
        style = { backgroundSize: "100% 44px" };
      }
      return style;
    },
  },
  methods: {
    clickMask() {
      // if (this.maskClick) {
      //   this.looseBody()
      //   this.$emit('update:visible', false)
      // }
      this.looseBody();
      this.$emit("cancel");
      this.$emit("update:visible", false);
    },
    formateData() {
      if (this.layer > 1) {
        this.setLinkColumn();
      } else {
        // console.log("PickerDialog: this.column1 = ", this.data[0]);
        this.column1 = this.data[0] || [];
        this.column2 = this.data[1] || [];
        this.column3 = this.data[2] || [];
        this.column4 = this.data[3] || [];
        this.setNormalIndex();
      }
    },
    setLinkColumn() {
      if (this.layer === 2) {
        this.setLinkLayer2();
      } else if (this.layer === 3) {
        this.setLinkLayer2();
        this.setLinkLayer3();
      } else if (this.layer === 4) {
        this.setLinkLayer2();
        this.setLinkLayer3();
        this.setLinkLayer4();
      }
    },
    setLinkLayer2() {
      const { defaultIndex } = this;
      this.column1 = this.data || [];
      if (typeof defaultIndex === "number") {
        this.dIndex1 = defaultIndex;
        this.dIndex2 = 0;
        if (this.data.length > 1 && this.data[0].children) {
          this.column2 = this.data[0].children || [];
        }
      } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0) {
        this.dIndex1 = defaultIndex[0] || 0;
        this.column2 = this.data[this.dIndex1].children || [];
        this.$nextTick(() => {
          if (this.column2.length - 1 < defaultIndex[1]) {
            this.dIndex2 = this.column2.length - 1;
          } else {
            this.dIndex2 = defaultIndex[1] || 0;
          }
        });
      }
    },
    setLinkLayer3() {
      const { defaultIndex } = this;
      if (typeof defaultIndex === "number") {
        this.dIndex3 = 0;
        if (this.column2.length > 1 && this.column2[0].children) {
          this.column3 = this.column2[0].children || [];
        }
      } else if (Array.isArray(defaultIndex) && defaultIndex.length > 1) {
        this.$nextTick(() => {
          this.column3 = this.column2[this.dIndex2].children || [];
          this.$nextTick(() => {
            if (this.column3.length - 1 < defaultIndex[2]) {
              this.dIndex3 = this.column3.length - 1;
            } else {
              this.dIndex3 = defaultIndex[2] || 0;
            }
          });
        });
      }
    },
    setLinkLayer4() {
      const { defaultIndex } = this;
      if (typeof defaultIndex === "number") {
        this.dIndex4 = 0;
        if (this.column3.length > 1 && this.column3[0].children) {
          this.column4 = this.column3[0].children || [];
        }
      } else if (Array.isArray(defaultIndex) && defaultIndex.length > 2) {
        setTimeout(() => {
          this.column4 = this.column3[this.dIndex3].children || [];
          this.$nextTick(() => {
            if (this.column4.length - 1 < defaultIndex[3]) {
              this.dIndex4 = this.column4.length - 1;
            } else {
              this.dIndex4 = defaultIndex[3] || 0;
            }
          });
        });
      }
    },
    setNormalIndex() {
      this.$nextTick(() => {
        const { defaultIndex } = this;
        if (Array.isArray(defaultIndex)) {
          this.setDefaultIndex();
          if (defaultIndex.length > 0) {
            this.indexArr[0] = defaultIndex[0] || 0;
            // console.log(
            //   "PickerDialog setNormalIndex(): defaultIndex[0] = " +
            //     defaultIndex[0]
            // );
            this.dIndex1 = defaultIndex[0] || 0;
          }
          if (defaultIndex.length > 1) {
            this.indexArr[1] = defaultIndex[1] || 0;
            this.dIndex2 = defaultIndex[1] || 0;
          }
          if (defaultIndex.length > 2) {
            this.indexArr[2] = defaultIndex[2] || 0;
            this.dIndex3 = defaultIndex[2] || 0;
          }
          if (defaultIndex.length > 3) {
            this.indexArr[3] = defaultIndex[3] || 0;
            this.dIndex4 = defaultIndex[3] || 0;
          }
        } else {
          this.dIndex1 = Number(defaultIndex) || 0;
        }
      });
    },
    setDefaultIndex() {
      const { indexArr } = this;
      const self = this;
      function next() {
        let promise = Promise.resolve();
        let index = 0;
        while (index < self.data.length) {
          promise = promise.then(indexArr[index]);
          index++;
        }
      }
      next();
    },
    change(index, res, selectInd) {
      console.log(
        "PickerDialog change() index = " + index + "; value = " + res.value
      );
      this.result[index] = res;
      this.indexArr[index] = selectInd;
      this.$emit("change", this.result, this.indexArr);
    },
    change1(res, selectInd) {
      if (res) {
        this.change(0, res, selectInd);
        if (this.layer > 1) {
          this.dIndex2 = 0;
          this.changeLink("column2", res);
        }
      }
    },
    change2(res, selectInd) {
      if (res) {
        this.change(1, res, selectInd);
        if (this.layer > 2) {
          this.dIndex3 = 0;
          this.changeLink("column3", res);
        }
      }
    },
    change3(res, selectInd) {
      if (res) {
        this.change(2, res, selectInd);
        if (this.layer > 3) {
          this.dIndex4 = 0;
          this.changeLink("column4", res);
        }
      }
    },
    change4(res, selectInd) {
      if (res) {
        this.change(3, res, selectInd);
      }
    },
    changeLink(key, res) {
      if (this.layer) {
        // clearTimeout(this.linktimer)
        this.linktimer = setTimeout(() => {
          this[key] = res.children || [];
        }, 1000 / 60);
      }
    },
    cancel() {
      this.looseBody();
      this.$emit("cancel");
      this.$emit("update:visible", false);
    },
    confirm() {
      this.looseBody();
      this.$emit("confirm", this.result, this.indexArr);
      this.$emit("update:visible", false);
    },
    stopPropagation(e) {
      e.stopPropagation();
    },
    fixedBody() {
      const scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      this.prevBodyCss = document.body.style.cssText;
      document.body.style.cssText +=
        "position:fixed;width:100%;top:-" + scrollTop + "px;";
    },
    looseBody() {
      const body = document.body;
      const top = body.style.top;
      body.style.cssText = this.prevBodyCss;
      body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
      body.style.top = "";
    },
    init() {
      this.result = [];
      this.indexArr = [
        () => (this.dIndex1 = this.defaultIndex[0] || 0),
        () => (this.dIndex2 = this.defaultIndex[1] || 0),
        () => (this.dIndex3 = this.defaultIndex[2] || 0),
        () => (this.dIndex4 = this.defaultIndex[3] || 0),
      ];
      // for (var i = 0; i < this.indexArr.length; i++) {
      //   console.log("PickerDialog init() this.dIndex1 = " + this.dIndex1);
      //   console.log("PickerDialog init() this.dIndex2 = " + this.dIndex2);
      //   console.log("PickerDialog init() this.dIndex3 = " + this.dIndex3);
      //   console.log("PickerDialog init() this.dIndex4 = " + this.dIndex4);
      // }
      this.formateData();
    },
  },
};
</script>
<style scoped>
.pickerDialogContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--current-dialog-mask-bg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.pickerCard {
  width: 100%;
  background-color: var(--current-setting-card-bg-color);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
}

.pickerCard .titleContainer {
  width: auto;
  height: 56px;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(255, 0, 0, 0.5);
}

.pickerCard .titleContainer .title {
  font-size: 20px;
  color: var(--current-dialog-title-color);
}

.pickerCard .content {
  position: relative;
  width: auto;
  height: 200px;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
  /* background: rgba(255, 255, 0, 1); */
}

.pickerCard .content .contentBg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 200px;
  /* background: rgba(255, 0, 0, 0.5); */
  display: flex;
  flex-direction: column;
}

.pickerCard .content .contentBg .topDividerLine {
  width: 100%;
  height: 0.25px;
  margin-top: 72px;
  background: var(--current-divider-line-color);
}

.pickerCard .content .contentBg .bottomDividerLine {
  width: 100%;
  height: 0.25px;
  margin-top: 56px;
  background: var(--current-divider-line-color);
}

.pickerCard .content .colums {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 200px;
  display: flex;
  font-size: 16px;
  flex: 1;
}

.pickerCard .pickDivider {
  height: 8px;
  width: 100%;
  /* background: rgba(255, 0, 255, 0.5); */
}
</style>
